<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Zoo</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="ie-stand">
    <meta name="viewport" content="initial-scale = 1, user-scalable = no">

    <link rel="icon" href="Zoo.ico" type="image/ico">

    <link type="text/css" href="lib/css/bootstrap.css" rel="stylesheet"/>
    <link type="text/css" href="lib/css/index.css" rel="stylesheet"/>


    <script src="lib/script/jquery.js"></script>
    <script src="lib/script/bootstrap.js"></script>



</head>
<body style="-webkit-app-region: drag;overflow: hidden">
<div id="frameBody">
    <div class="col-sm-12" id="header">
        <span class="glyphicon glyphicon-th-list" style="margin-left: 4px;"> Zoo</span>
        <ul class="toolBtns">
            <li><span id="plusBtn" class="glyphicon glyphicon-plus" style="-webkit-app-region:no-drag;"></span></li>
            <li><span id="minisizeBtn" class="glyphicon glyphicon-minus" style="-webkit-app-region:no-drag;"></span></li>
            <li><span id="closeBtn" class="glyphicon glyphicon-remove" style="-webkit-app-region:no-drag;"></span></li>
        </ul>
    </div>
    <div class="col-sm-12" id="user">
        <img class="user-head" src="imgs/user-head.png" width="60" alt="userHead">
        <div class="user-descrip">
            <span>佚名</span>
            <div class="btn-group status" style="-webkit-app-region:no-drag;">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    <span class="sub-holder"></span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li style="-webkit-app-region:no-drag;">
                    <a tabindex="-1" href="#"><span class="sub" style="background-position: 5px 10px"></span>我在线上</a>
                    </li>
                    <li style="-webkit-app-region:no-drag;">
                        <a tabindex="-1" href="#"><span class="sub" style="background-position: 5px -134px"></span>隐身</a>
                    </li>
                    <li class="divider"></li>
                    <li style="-webkit-app-region:no-drag;">
                        <a tabindex="-1" href="#"><span class="sub" style="background-position: 5px -107px"></span>离开</a>
                    </li>
                    <!--<li style="-webkit-app-region:no-drag;">
                        <a tabindex="-1" href="#"><span class="sub" style="background-position: 5px -159px"></span>注销登录</a>
                    </li>-->
                </ul>
            </div>
            <div class="user-message" style="-webkit-app-region:no-drag;">
                <input id="messageBoard" type="text" placeholder="请留言..." value="">
            </div>
            <div class="btn-group" id="tool">
                <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -2px -2px" ></button>
                <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -20px -2px"></button>
                <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -42px -2px"></button>
            </div>
        </div>
    </div>
    <div class="col-sm-12" style="-webkit-app-region: no-drag;">
        <input type="text" id="search" placeholder="查找联系人、群组、分支..." style="margin: 0 6px;">
    </div>
    <div class="col-sm-12" id="content" style="-webkit-app-region:no-drag;">
        <div class="custom-wizard-pills">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#pills-tab1" data-toggle="tab">
                        <img src="imgs/user.png" width="20">
                    </a>
                </li>
                <li>
                    <a href="#pills-tab2" data-toggle="tab">
                        <img src="imgs/users.png" width="20">
                    </a>
                </li>
                <li>
                    <a href="#pills-tab3" data-toggle="tab">
                        <img src="imgs/message.png" width="20">
                    </a>
                </li>

            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="pills-tab1">
                    <ul style="list-style: none;padding-left: 10px;">
                        <li>
                            <span class="arrow"></span>
                            <span>女汉子~</span>
                            <span>2/8</span>
                            <ul style="list-style: none;padding-left: 10px;display: none" class="sub">
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">跳蚤</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">扣扣</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">芳芳</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">妖妖</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">雪琼</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span class="arrow"></span>
                            <span>我的好友</span>
                            <span>2/8</span>
                            <ul style="list-style: none;padding-left: 10px;display: none" class="sub">
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友1</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友2</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友3</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友4</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友5</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span class="arrow"></span>
                            <span>公司好友</span>
                            <span>2/8</span>
                            <ul style="list-style: none;padding-left: 10px;display: none"class="sub">
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友1</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友2</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                                <li style="margin: 10px 0">
                                    <img src="imgs/avatar.png" >
                                    <div style="display: inline-block">
                                        <span style="display: block">好友3</span>
                                        <span style="display: block">状态</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="pills-tab2">
                    222
                </div>
                <div class="tab-pane" id="pills-tab3">
                    333
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-12 btn-group" id="footer">
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: 2px 5px" ></button>
        <button id="setBtn" type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -27px 5px"></button>
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -54px 5px"></button>
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -82px 5px" ></button>
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -111px 5px"></button>
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -140px 5px"></button>
        <button type="button" class="btn btn-default" style="-webkit-app-region:no-drag; background-position: -170px 5px"></button>
    </div>
</div>

<script src="lib/script/oschat.js"></script>
<script src="lib/script/window.js"></script>
<script src="lib/script/content.js"></script>
<script src="lib/script/status.js"></script>
<script src="lib/script/list.js"></script>
<script src="lib/script/arrow.js"></script>
<script src="lib/script/index.js"></script>
<script type="text/javascript">
    $(function(){
        new oschat.Index();
    });

</script>
</body>
</html>